<!-- 视频审核 -->
<template>
  <div class="userpage">
    <div class="user-head">
      <div class="search">
        <button @click="openSearch()">查询用户运动信息</button>
      </div>
    </div>

    <div class="list-box" id="list-box">
      <el-table
        ref="usersTable"
        :data="list"
        v-loading="loading"
        :height="height"
        style="width: 100%"
        header-row-class-name="headcss"
      >
        <el-table-column
          prop="Runner"
          label="用户"
          width="360"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="Number"
          label="鞋子编号"
          align="center"
          width="190"
        ></el-table-column>
        <el-table-column
          prop="Level"
          label="鞋子等级"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="InitialSteps"
          label="初始步数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="DailySteps"
          label="当天步数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="StartTime"
          label="每天第一次开始时间"
          align="center"
          width="190"
        ></el-table-column>
        <el-table-column
          prop="SubmitTime"
          label="提交时间"
          align="center"
          width="190"
        ></el-table-column>
        <el-table-column
          prop="DeviceId"
          label="设备号"
          align="center"
          width="190"
        ></el-table-column>
        <el-table-column prop="State" label="状态" align="center" width="190">
          <template slot-scope="scope">
            {{ scope.row.State == 0 ? "跑步" : "提交" }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-limit">
      <el-pagination
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 50, 100, 200]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="查询用户运动信息"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form :model="form">
        <el-form-item label="用户">
          <el-input v-model="form.Addr"></el-input>
        </el-form-item>
        <el-form-item label="提交时间">
          <el-date-picker v-model="form.Times" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="hanldeSearch()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getRuninfoList } from "@/utils/api";
import { Message } from "element-ui";
import moment from "moment";
export default {
  data() {
    return {
      currentPage: 1,
      size: 15,
      total: 0,
      height: "100%",
      loading: false,
      list: [],
      type: 1,
      content: "",
      doArry: [],
      dialogVisible: false,
      form: {
        Addr: "",
        Times: "",
      },
      Addr: "0xbf39f856d2a24b70facE3136fD0C7a3EcA2e7f37",
      Times: "2023-06-18",
    };
  },
  methods: {
    // 基础查询
    async fetchData() {
      let params = {
        Addr: this.form.Addr,
        Times: moment(this.form.Times).format("YYYY-MM-DD"),
        Size: this.size,
        Limit: this.currentPage - 1,
      };
      console.log(params);
      this.loading = true;
      let { data, response } = await getRuninfoList(params);
      this.loading = false;
      console.log(data);

      // this.total = total;
      this.list = [data];
      this.form = {
        Addr: "",
        Times: "",
      };
    },
    openSearch() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.form = {
        Addr: "",
        Times: "",
      };
    },
    hanldeSearch() {
      const { Addr, Times } = this.form;
      if (!Addr ) {
        this.$message.error('用户不能为空')
        return;
      }
      if (!Times) {
        this.$message.error('提交时间不能为空')
        return;
      }
      this.dialogVisible = false;
      this.fetchData();
    },

    //查询当日新注册用户

    SelectionChange(val) {
      this.doArry = val;
    },
    SizeChange(size) {
      this.size = size;
      this.currentPage = 1;
    },
    CurrentChange(page) {
      this.currentPage = page;
    },
  },
};
</script>

<style scoped lang="scss">
.userpage {
  padding: 20px 20px 10px 20px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.video {
  height: 400px;
}
.list-box {
  flex: 1;
  overflow-y: scroll;
}
.page-limit {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
.user-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
}
.stsr {
  color: #2389fe;
  font-weight: bolder;
  margin: 0 4px;
  font-size: 16px;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.search {
  display: flex;
  align-items: center;
  width: 320px;
  justify-content: space-between;
  width: 100%;

  input {
    width: 200px;
  }

  button {
    width: 150px;
    height: 40px;
    background: #2389fe;
    border-radius: 5px;
    color: #fff;
    margin-left: 10px;
    &:active {
      opacity: 0.8;
    }
  }
}
.user-do {
  display: flex;
  align-items: center;
  .btn1 {
    width: 70px;
    height: 40px;
    background: rgba(211, 12, 63, 0.99);
    border-radius: 5px;
    color: #fff;
    &:active {
      opacity: 0.8;
    }
  }
  .btn2 {
    width: 70px;
    height: 40px;
    background: #2389fe;
    border-radius: 5px;
    color: #fff;
    margin: 0 10px;
    &:active {
      opacity: 0.8;
    }
  }
  .btn3 {
    width: 171px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #2389fe;
    color: #2389fe;
    background: #fff;
    &:active {
      border: 1px solid #15549d;
      color: #15549d;
    }
  }
}
.page-title {
  display: flex;
  align-items: center;
  padding-bottom: 20px;

  p {
    margin-left: 10px;
    font-size: 24px;
    color: #333333;
  }

  img {
    width: 24px;
  }
}
</style>
<style>
.el-table {
  border-radius: 5px;
}
.el-table th.el-table__cell {
  background-color: #2389fd !important;
  color: #fff;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #deeeff !important;
}
.el-table td.el-table__cell {
  border: none;
}
.inp .el-input__inner {
  border: none;
  padding-left: 0;
}
</style>
